import type { PropType } from 'vue';
import styles from './actionBar.module.scss';
import { IBtn } from './interface';
import { useUserStore } from '@/stores/user';

export default defineComponent({
  name: 'ActionBar',
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object as PropType<any>,
      default: () => ({}) as any,
    },
    permissionPrefix: {
      type: String as PropType<string>,
      default: '',
    },
    disabledList: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
    beforeeBtns: {
      type: Array as PropType<{ list: IBtn[] }[]>,
      default: () => [],
    },
    afterBtns: {
      type: Array as PropType<{ list: IBtn[] }[]>,
      default: () => [],
    },
  },
  setup(props, context) {
    const { slots, emit } = context;
    // const method = function () {
    //   emit('method', props.value);
    // };
    const userStore: any = useUserStore();
    const defaultBtns = [
      {
        list: [
          {
            name: '新增',
            command: 'add',
            enabled: () => true,
          },
          {
            name: '保存',
            command: 'save',
            authType: 'edit',
            enabled: () => {
              return (
                !props.data.status ||
                ([0, 3].includes(props.data.status) && props.data.taskAllStatus === 1)
              );
            },
          },
          {
            name: '关闭',
            command: 'close',
            enabled: () => {
              return !props.data.closer && props.data.taskAllStatus === 1;
            },
          },
          {
            name: '打开',
            command: 'open',
            enabled: () => {
              return props.data.closer && props.data.taskAllStatus === 1;
            },
          },
        ],
      },
    ];

    const enabledBttns = computed(() => {
      const list = defaultBtns.map((item) => {
        item.list = item.list.filter(
          (btn) => !props.disabledList.some((command) => command === btn.command),
        );
        return item;
      });
      // console.log([...props.beforeeBtns, ...list, ...props.afterBtns]);
      return [...props.beforeeBtns, ...list, ...props.afterBtns];
    });
    const onClick = function (btn) {
      emit('click', btn, props.data);
    };
    // expose({
    //   method,
    // });

    const checkPremiss = (k) => {
      console.log(k);
      return userStore.userInfos.authBtnList.some((v: string) => v === k);
    };
    return () => {
      return (
        <view class={styles.actionBar}>
          {enabledBttns.value.map((group) => (
            <view class="group">
              {group.list.map((btn) =>
                checkPremiss(`${props.permissionPrefix}_${btn.authType || btn.command}`) ? (
                  <button
                    loading={props.loading}
                    disabled={!btn.enabled()}
                    type="primary"
                    style={{
                      background: '#fff',
                      border: 0,
                      color: btn.enabled() ? '#4d80f0' : '#ddd',
                      fontSize: '14px',
                      letterSpacing: '2px',
                      whiteSpace: 'nowrap',
                    }}
                    onClick={() => onClick(btn)}
                  >
                    {btn.name}
                  </button>
                ) : (
                  ''
                ),
              )}
            </view>
          ))}
          {slots.default && slots.default()}
        </view>
      );
    };
  },
});
